import { type ComponentType, Component } from "react";

// 定义一个方法，该方法就是一个高阶组件
export default function withDelay(
  WrappedComponent: ComponentType,
  time = 3000
) {
  // 返回一个新组件
  return class WithDelayComponent extends Component {
    state = {
      // 控制被高阶（包装）组件是否显示
      show: false,
    };

    componentDidMount() {
      setTimeout(() => {
        this.setState({
          show: true,
        });
      }, time);
    }

    render() {
      // 返回的新组件，内部渲染的就是 被包装的组件
      return this.state.show && <WrappedComponent {...this.props} />;
    }
  };
}
